<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>分页控件测试</title>
    <link href="../../js/dist/sdpagination.min.css" rel="stylesheet" />
</head>
<body>
<input type="hidden" id="PageIndex" th:value="${pageInfo.cpage}">
<input type="hidden" id="PageSize" th:value="${pageInfo.pageSize}">
<input type="hidden" id="TotalCount" th:value="${pageInfo.totalRow}">
<div id="PagerContainer"></div>
<br />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script type="application/javascript" src="../../js/jquery-3.6.0.min.js"></script>
<script src="../../js/dist/jquery-sdpagination.min.js"></script>
<script>
    $(function () {
        Init();
    });
    function Init() {
        //下面的3个值理论上应该从服务获取更新
        var PageIndex=parseInt($("#PageIndex").val());
        var PageSize=parseInt($("#pageSize").val());
        var TotalCount=parseInt($("#TotalCount").val());

        $("#PagerContainer").sdpagination({
            boxClass: "sdpagination sdpagination-red sdpagination-large",
            totalCount: TotalCount,           //总条数
            pageSize: PageSize,                //每页显示
            pageIndex: PageIndex,                //当前页数
            onPageIndexChange: function (pageIndex, pageSize) { //回调，点击按钮时或者输入页数时，激发onPageIndexChange事件，回调参数为 新页数、PageSize
               hideBook();
                //页数变化了，该干点啥，
                $("#PageIndex").val(pageIndex);
                getBook(pageIndex,pageSize);
                Init();
                showBook();
            },
            onPageSizeChange: function (pageSize) {         //回调，当在PageSize下拉框里选择时，onPageSizeChange，回调参数为 新PageSize
               hideBook();
                //pageSize变化了，该干点啥，                //注意，分页信息里要显示PageSize的值，同时设置了onPageSizeChange回调时，才会出现PageSize下拉框
                $("#PageIndex").val(1);
                $("#PageSize").val(pageSize);
                getBook(1,pageSize);
                Init();
                showBook();
            }
        });
    }
</script>
</body>
</html>
